<template>
  <!-- 公共部分使用插槽，封装组件component,waike组件 -->
  <!-- <waike>
    <template #form>里面为会改变的内容 </template>
  </waike> -->
  <waike title="登录">
    <template #form>
      <router-link to="/register">还没有账号，点击注册</router-link>
      <div class="login-from">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户账号" prop="uname">
            <el-input
              type="text"
              auto-complete="off"
              placeholder="请输入用户名/邮箱"
              v-model="ruleForm.uname"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="upwd">
            <el-input
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              v-model="ruleForm.upwd"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户类型" prop="utype">
            <el-select
              placeholder="请选择用户类型"
              v-model="ruleForm.utype"
              style="width: 100%"
            >
              <el-option label="请选择用户类型" value=""></el-option>
              <el-option label="学生" value="0"></el-option>
              <el-option label="老师" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="验证码" prop="uyzm">
            <el-input
              type="text"
              auto-complete="off"
              placeholder="请输入验证码"
              v-model="ruleForm.uyzm"
              ><el-button
                slot="append"
                v-html="ruleForm.yzmimg"
                @click="change"
              ></el-button
            ></el-input>
          </el-form-item>

          <div class="button">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button type="primary" @click="resetForm('ruleForm')"
              >重置</el-button
            >
          </div>

          <router-link to="/forgetPassword">忘记密码</router-link>
        </el-form>
      </div>
    </template>
  </waike>
</template>

<script>
import axios from "axios";
import waike from "../components/waike.vue";
import { Message, MessageBox } from "element-ui";
export default {
  components: { waike },
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    var validateType = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择用户类型"));
      } else {
        callback();
      }
    };

    var validateYzm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        if (
          this.ruleForm.uyzm.toLowerCase() !==
          this.ruleForm.yzmtext.toLowerCase()
        ) {
          callback(new Error("验证码不正确"));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm: {
        uname: "",
        upwd: "",
        utype: "",
        uyzm: "",
        yzmimg: "",
        yzmtext: "",
      },
      rules: {
        uname: [{ validator: validateName, trigger: "blur" }],
        upwd: [{ validator: validatePass, trigger: "blur" }],
        utype: [{ validator: validateType, trigger: "change" }],
        uyzm: [{ validator: validateYzm, trigger: "blur" }],
      },
    };
  },
  methods: {
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post(
              "/v1/users/login",
              `username=${this.ruleForm.uname}&password=${this.ruleForm.upwd}&usertype=${this.ruleForm.utype}`
            )
            .then((result) => {
              if (result.data.status == 200) {
                let obj = {
                  userName: result.data.uname,
                  userType: result.data.utype,
                };
                this.$store.commit("loginOk", obj);
                // localStorage.setItem('userName',result.data.uname)
                localStorage.userName = obj.userName;
                localStorage.userType = obj.userType;
                Message.success({
                  showClose: true,
                  message: "登录成功",
                  type: "success",
                });
                if (this.$store.state.userType == "0") {
                  this.$router.push("/studentHome/homepage"); //跳转到home页面,前往router/index.js里配置路由守卫
                } else {
                  this.$router.push("/teacherHome/teacherHomepage");
                }
              } else {
                MessageBox("登录失败，账号或密码错误", "提示", {
                  confirmButtonText: "确定",
                  type: "error",
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //切换验证码
    change() {
      axios.get("/v1/users/captcha").then((result) => {
        console.log(result.data.text);
        this.ruleForm.yzmimg = result.data.img;
        this.ruleForm.yzmtext = result.data.text;
      });
    },
  },
  mounted() {
    //挂载阶段加载验证码
    this.change();
  },
};
</script>

<style lang="scss">
</style>
